<script setup lang="ts">
import { ElTable } from 'element-plus'
import { toRefs } from 'vue'

const props = withDefaults(defineProps<{
    column?: any
    data?: any
}>(), {
    column: [],
    data: [],
})
const { column, data } = toRefs(props)
console.log(data.value)
</script>

<template>
    <div>
        <ElTable :data="data"
                 border
        >
            <template v-for="item in column"
                      :key="item.lable"
            >
                <el-table-column v-if="item.operate"
                                 :label="item.label"
                                 :width="item.width || ''"
                                 :fixed="item.fixed || ''"
                >
                    <template #default="scope">
                        <slot name="operate"
                              :row-data="scope.row"
                              :row-index="scope.$index"
                        />
                    </template>
                </el-table-column>

                <el-table-column v-else
                                 :label="item.label"
                                 :prop="item.prop"
                                 :width="item.width || ''"
                />
            </template>
        </ElTable>
    </div>
</template>

<style lang="scss" scoped>

</style>
